<template>
  <div>
    <div style="margin:10px 0;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
      <el-dropdown size="small" split-button type="primary"  @command="handleSelectOrder" trigger="click">{{selectKind}}
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="全部">全部</el-dropdown-item>
          <el-dropdown-item command="今日订单">今日订单</el-dropdown-item>
          <el-dropdown-item command="已完成">已完成</el-dropdown-item>
          <el-dropdown-item command="未完成">未完成</el-dropdown-item>
        </el-dropdown-menu>
        <!--筛选的内容放这里-->
      </el-dropdown>
      <div class="search_box">
        <el-input style="width: 400px" placeholder="请输入用户名、商品名、购买时间、订单编号进行模糊查询" v-model="search" >
          <i slot="suffix" class="el-icon-close" @click="clearAndLoad"style="margin-top: 10px"></i>
        </el-input>

        <el-button class="ml-5"type="primary" @click="load">搜索</el-button>
      </div>
    </div >
    <!--顶部搜索筛选等操作 end-->
    <!--表格主体 start-->
    <el-table :data="tableData"
              style="width: 100%"
              :default-sort = "{prop: 'date', order: 'descending'}"
              :header-cell-style="tableHeaderColor">
      <!--    日期和订单状态前端处理-->
      <el-table-column label="购水日期"  width="120">
        <template v-slot="scope">
          <div v-html="scope.row.orderBuyTime" style="white-space: pre-wrap;line-height: 30px;"></div>
        </template>
      </el-table-column>
      <el-table-column prop="orderUsername" label="用户名（学号）"  width="120"></el-table-column>
      <el-table-column  label="商品名称" width="120">
        <template v-slot="scope">
          <div v-html="scope.row.orderCommodityName" style="white-space: pre-wrap;line-height: 30px;"></div>
        </template>
      </el-table-column>
      <el-table-column prop="orderCommodityNumber" label="商品数量"width="100">
        <template v-slot="scope">
          <div v-html="scope.row.orderCommodityNumber" style="white-space: pre-wrap;line-height: 30px;"></div>
        </template>
      </el-table-column>
      <el-table-column prop="orderCampus" label="校区" width="140"></el-table-column>
      <el-table-column prop="orderArea" label="片区" width="140"></el-table-column>
      <el-table-column prop="orderBuilding" label="楼号" width="140"></el-table-column>
      <el-table-column prop="orderDormitory" label="宿舍号" width="140"></el-table-column>
      <el-table-column prop="orderPrice" label="总金额(¥)"width="140"></el-table-column>
      <el-table-column prop="orderStatus" label="订单状态"width="140"></el-table-column>
    </el-table>
    <!--表格主体 end-->
    <!--分页 end-->
    <div class="pagination" >
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-sizes="[5,8, 10, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count">
      </el-pagination>
    </div>
    <!--分页 end-->
  </div>
</template>

<script>
import user from "@/views/ShuManagement/User.vue";

export default {
  name: "HistoryOrder",
  data(){
    return{
      //页签
      plate:"订水",
      func:"历史订单",
      tableData: [],
      count:0,
      pageNum:1,
      pageSize:5,
      search:"",
      multipleSelection:[],
      dialogFormVisible:false,
      form:{},
      //筛选下拉框，包含全部0、今日订单1、已完成2、未完成3
      selectKind:"筛选",
      selectCode:0,    //初始为0全部,
      importUrl:"http://localhost:9090/water/order/import",
      headersObj:{
        token:JSON.parse(localStorage.getItem("user")).token
      },
    }
  },
  created() {
    this.load()
    this.$emit("generateTab",this.plate,this.func)
  },
  methods:{
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #e0f6fe;color: #303133;font-weight: 600;font-size:12px;'
      }
    },
    load() {
      //axios方式http://localhost:9090前缀写在了request.js文件中，可省略
      this.request.get("/water/order/page",{
        params: {
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          search:this.search,         //模糊查询
          selectCode:this.selectCode, //筛选种类包含全部0、今日订单1、已完成2、未完成3
          username:JSON.parse(localStorage.getItem("user")).username
        }
      }).then(res=>{
        if(res.code=="200") {
          this.tableData = res.data.records;
          this.count = res.data.total;
          for (let i = 0; i < Math.min(this.pageSize,this.count); i++) {
            this.tableData[i].orderStatus = this.tableData[i].orderIsComplete ? "已完成" : "未完成";
            this.tableData[i].orderCommodityName=this.tableData[i].orderCommodityName.replace(/,/g,"<br/>");
            this.tableData[i].orderCommodityNumber=this.tableData[i].orderCommodityNumber.replace(/,/g,"<br/>");
          }
          console.log(this.tableData)
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    //分页
    handleSizeChange(pageSize){
      console.log("pageSize:"+pageSize);
      this.pageSize=pageSize;
      this.load();
    },
    handleCurrentChange(pageNum){
      console.log("pageNum:"+pageNum);
      this.pageNum=pageNum;
      this.load();
    },
    clearAndLoad(){
      this.pageNum=1;
      this.pageSize=5;
      this.search="";
      this.load();
    },
    //筛选
    handleSelectOrder(selectKind){
      if(selectKind=="全部")this.selectCode=0
      else if(selectKind=="今日订单")this.selectCode=1
      else if(selectKind=="已完成")this.selectCode=2
      else if(selectKind=="未完成")this.selectCode=3
      this.selectKind=selectKind;
      console.log("selectCode="+this.selectCode)
      this.load();
    }
  }
}
</script>

<style scoped>
.el-menu {
  height: 100%;
  border-right-width: 0;
}
.pagination,.search_box{
  padding: 10px 0px;
}
.el-table .cell {
  white-space: pre-wrap;
}
</style>